<template>
  <Modal
    class="modal-tips"
    v-model="config"
    @on-cancel="cancel"
    :mask-closable="false"
    footer-hide
    title="修改手机号"
  >
    <div class="modal-main" style="position: relative">
      <Spin :withIcon="true" v-if="loading"></Spin>
      <div style="width: 300px; margin: 0 auto 20px">
        <Steps :current="current">
          <Step title="验证身份"></Step>
          <Step title="设置新的手机"></Step>
        </Steps>
      </div>
      <template v-if="current == 0">
        <div class="flx-row-s-c item-line">
          <div class="title-name">手机号码</div>
          <Input
            :value="$store.state.user.mobile"
            type="tel"
            placeholder="请输入"
            maxlength="30"
            disabled
            style="width: 225px"
          />
        </div>
        <div class="flx-row-s-c item-line">
          <div class="title-name">验证码</div>
          <Input
            v-model.trim="oldCode"
            type="text"
            placeholder="请输入"
            maxlength="6"
            style="width: 100px; margin-right: 10px"
          />
          <div
            class="user-normal-button small-code-button"
            :class="[getCodeAvailable ? 'user-normal-button' : 'forbid-button']"
            @click="getCode"
          >
            {{ getCodeContent }}
          </div>
        </div>
        <div class="flx-row-c-c" style="margin-top: 30px">
          <div
            class="big-button-size user-strong-button"
            style="margin-right: 50px"
            @click="nextStep"
          >
            下一步
          </div>
          <div class="big-button-size user-normal-button" @click="cancel">
            取消
          </div>
        </div>
      </template>
      <template v-else-if="current == 1">
        <div class="flx-row-s-c item-line">
          <div class="title-name">新手机号码</div>
          <Input
            v-model.trim="newPhone"
            type="tel"
            placeholder="请输入"
            maxlength="30"
            style="width: 225px"
          />
        </div>
        <div class="flx-row-s-c item-line">
          <div class="title-name">验证码</div>
          <Input
            v-model.trim="newCode"
            type="text"
            placeholder="请输入"
            maxlength="6"
            style="width: 100px; margin-right: 10px"
          />
          <div
            class="user-normal-button small-code-button"
            :class="[getCodeAvailable ? 'user-normal-button' : 'forbid-button']"
            @click="getNewPhoneCode"
          >
            {{ getCodeContent }}
          </div>
        </div>
        <div class="flx-row-c-c" style="margin-top: 30px">
          <div
            class="big-button-size user-strong-button"
            style="margin-right: 50px"
            @click="submit"
          >
            确定
          </div>
          <div class="big-button-size user-normal-button" @click="cancel">
            取消
          </div>
        </div>
      </template>
    </div>
  </Modal>
</template>

<script>
import { sendCode, checkCode, updatePhone, getCode } from "@/api/user";
import { validMobile } from "@/utils/validate.js";
import { insensitivePhone } from "@/utils/format";
export default {
  props: {
    show: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      loading: false,
      current: 0,
      // 表单数据
      oldCode: "",
      newPhone: "",
      newCode: "",
      verifyCode: null,
      // 获取验证码数据
      // 是否可以获取验证码
      getCodeAvailable: true,
      // 获取验证码按钮上的文字
      getCodeContent: "获取验证码",
      // 获取验证码定时器
      getCodeInterval: null,
    };
  },
  methods: {
    // 提交表单
    async getCode() {
      this.loading = true;
      let res = await sendCode();
      if (res.code == 200) {
        // this.code = res.data.vcode;
        this.getCodeAvailable = false;
        let i = 60;
        this.getCodeContent = `${i--}秒后再获取`;
        this.getCodeInterval = setInterval(() => {
          if (i <= 1) {
            this.getCodeContent = "获取验证码";
            this.getCodeAvailable = true;
            clearInterval(this.getCodeInterval);
            return;
          }
          this.getCodeContent = `${i--}秒后再获取`;
        }, 1000);
        this.$Message.success("验证码已经发送，请注意查收！");
      }
      this.loading = false;
    },
    // 下一步
    async nextStep() {
      if (this.oldCode == null || this.oldCode.length < 6) {
        this.$Message.warning("请输入正确的手机验证码！");
        return;
      }
      this.loading = true;
      let data = {
        code: this.oldCode,
      };
      let res = await checkCode(data);
      if (res.code == 200) {
        this.current = 1;
        this.getCodeAvailable = true;
        this.getCodeContent = "获取验证码";
        clearInterval(this.getCodeInterval);
        this.getCodeInterval = null;
        this.verifyCode = res.data.verifyCode;
      }
      this.loading = false;
    },
    // 提交确定
    async submit() {
      if (!this.verifyCode) {
        this.$Message.warning("没有身份验证凭证！");
        return;
      }
      if (!validMobile(this.newPhone)) {
        this.$Message.warning("请输入正确的手机号码！");
        return;
      }
      if (this.newCode == null || this.newCode.length < 6) {
        this.$Message.warning("请输入正确的手机验证码！");
        return;
      }
      this.loading = true;
      let data = {
        mobile: this.newPhone,
        code: this.newCode,
        verifyCode: this.verifyCode,
      };
      let res = await updatePhone(data);
      if (res.code == 200) {
        this.$Message.success("修改成功！");
        this.$store.commit("setMobile", insensitivePhone(this.newPhone));
        this.$emit("change-success");
        this.cancel();
      }
      this.loading = false;
    },
    /**
     * @description 获取验证码
     */
    async getNewPhoneCode() {
      if (!this.getCodeAvailable) return;
      if (!validMobile(this.newPhone)) {
        this.$Message.warning("请输入正确的手机号码！");
        return;
      }
      this.loading = true;
      let res = await getCode(this.newPhone);

      if (res.code == 200) {
        this.getCodeAvailable = false;
        let i = 60;
        this.getCodeContent = `${i--}秒后再获取`;
        this.getCodeInterval = setInterval(() => {
          if (i <= 1) {
            this.getCodeContent = "获取验证码";
            this.getCodeAvailable = true;
            clearInterval(this.getCodeInterval);
            return;
          }
          this.getCodeContent = `${i--}秒后再获取`;
        }, 1000);
        this.$Message.success("验证码已经发送，请注意查收！");
      }
      this.loading = false;
    },
    cancel() {
      this.config = false;
      this.current = 0;
      this.oldCode = "";
      this.newPhone = "";
      this.newCode = "";
      this.verifyCode = null;
      this.getCodeAvailable = true;
      this.getCodeContent = "获取验证码";
      if (this.getCodeInterval != null) {
        clearInterval(this.getCodeInterval);
      }
      this.getCodeInterval = null;
    },
  },
  computed: {
    config: {
      get() {
        return this.show;
      },
      set(val) {
        this.$emit("update:show", val);
      },
    },
  },
};
</script>

<style lang="scss" scoped>
.modal-main {
  padding: 30px 40px 50px;

  .item-line {
    margin-bottom: 10px;
  }
  .title-name {
    text-align: right;
    width: 120px;
    margin-right: 30px;
    font-size: 14px;
    line-height: 32px;
    color: #000;
    &::after {
      content: ":";
    }
  }

  /deep/.ivu-steps-item.ivu-steps-status-process .ivu-steps-head-inner {
    border-color: $mainColor;
    background: $mainColor;
  }
}
</style>